<!--  -->
<template>
    <div class="product-add">
      <el-form :model="product" :rules="rules" ref="productRef" status-icon>
        <el-form-item label="店铺名称">
          <el-input
            v-model="product.shop"
            placeholder="请输入店铺名称"
          ></el-input>
        </el-form-item>
  
        <el-form-item prop="productname" label="商品名">
          <el-input
            v-model="product.productname"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            name="headerImg"
            :action="uploadUrl"
            list-type="picture-card"
            :auto-upload="true"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
            :on-change="onChangeFile"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品原价">
          <el-input
            v-model="product.oldprice"
            placeholder="请输入原价"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input
            v-model="product.price"
            placeholder="请输入商品价格"
          ></el-input>
        </el-form-item>
  
        <el-form-item label="商品是否上架">
          <el-radio-group v-model="product.putaway">
            <el-radio label="1" size="large" border>上架</el-radio>
            <el-radio label="0" size="large" border>下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="product.categoryId"
            placeholder="请选择商品分类"
            size="large"
          >
            <!-- <el-option v-for="item in options"
          :key="item.value" :label="item.label" :value="item.value"/> -->
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in categoryList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
  
        <el-form-item label="商品是否添加">
          <el-button type="primary" @click="onAddProduct">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  import { RequestCategoryList, RequestAddProduct } from "@/api/product";
  import { Plus } from "@element-plus/icons-vue";
  import { baseURL } from "@/utils/request";
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: { Plus },
    data() {
      //这里存放数据
      return {
        product: {
          shop: "", //店铺名称
          productname: "", //商品名称
          picture: "",
          oldprice: "",
          price: "",
          putaway: "0", //1：上架，0：下架
          detail: "", //商品描述
          categoryId: "", //分类id
        },
        rules: {
          productname: [
            { required: true, message: "请输入商品名", trigger: "blur" },
          ],
        },
        categoryList: [],
        imageUrl: "",
        uploadUrl: baseURL + "/api/uploadFile",
        picurl: "", //上传图片服务器地址
      };
    },
    
    created() {
      this.getCategoryList();
    },
  
    //方法集合
    methods: {
      
      async onAddProduct() {
              let product = { ...this.product, picture: this.picurl }
        console.log(product);
              let data = await RequestAddProduct(product)
        console.log(data);
              let { resultCode, resultInfo } = data
              if (resultCode == 1) {
                  ElMessage.info('添加成功!')
              }
          },
      async getCategoryList() {
        let data = await RequestCategoryList();
        let { resultCode, resultInfo } = data;
        if (resultCode == 1) {
          this.categoryList = resultInfo.list;
        }
      },
      //上传之前执行，一般去验证图片大小与格式
      beforeAvatarUpload(rawFile) {
        // console.log("beforeAvatarUpload", rawFile);
        if (rawFile.type !== "image/webp" && rawFile.type !== "image/jpeg") {
          ElMessage.error("图片必须为webp格式或jpg图片!");
          return false; //终止上传
        } else if (rawFile.size / 1024 / 1024 > 2) {
          ElMessage.success("大小超过 2MB!");
          return false;
        }
        return true;
      },
      //图片预览
      onChangeFile(file) {
        // console.log('onChangeFile',file)
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      // 上传成功的回调
      handleAvatarSuccess(response, uploadFile) {
        console.log("上传成功", uploadFile.response.resultInfo.url);
        this.picurl = uploadFile.response.resultInfo.url;
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  .product-add {
    width: 800px;
    .el-form {
      width: 100%;
      .avatar {
        width: 148px;
        height: 148px;
        display: block;
      }
    }
  }
  </style>
  